<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>运营</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="javascript/jquery.js"></script>
    <script src="javascript/plug-ins/customScrollbar.min.js"></script>
    <script src="javascript/plug-ins/echarts.min.js"></script>
    <script src="javascript/plug-ins/layerUi/layer.js"></script>
    <script src="editor/ueditor.config.js"></script>
    <script src="editor/ueditor.all.js"></script>
    <script src="javascript/plug-ins/pagination.js"></script>
    <script src="javascript/public.js"></script>
    <script src="js/http.js"></script>

</head>
<body>
<div class="main-wrap">
    <div class="side-nav">
        <div class="side-logo">
            <div class="logo">
				<span class="logo-ico">
					<i class="i-l-1"></i>
					<i class="i-l-2"></i>
					<i class="i-l-3"></i>
				</span>
                <strong>后台管理</strong>
            </div>
        </div>

        <nav class="side-menu content mCustomScrollbar" data-mcs-theme="minimal-dark">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <i class="icon-columns"></i><a href="table.html">运营</a><i class="icon-angle-right"></i>
                        </dt>
                        <dd>
                            <a href="table.html">客户分析</a>
                        </dd>
                        <dd>
                            <a href="User.html">产品分析</a>
                        </dd>
                        <dd>
                            <a href="shop.html">商户查询</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </nav>

        <footer class="side-footer">© DeathGhost 版权所有</footer>

    </div>
    <div class="content-wrap">
        <header class="top-hd">
            <div class="hd-lt">
                <a class="icon-reorder"></a>
            </div>
            <div class="hd-rt">
                <ul>
                    <li>
                        <a href="#" target="_blank"><i class="icon-home"></i>前台访问</a>
                    </li>
                    <li>
                        <a><i class="icon-random"></i>清除缓存</a>
                    </li>
                    <li>
                        <a><i class="icon-user"></i>管理员:<em>DeathGhost</em></a>
                    </li>
                    <li>
                        <a><i class="icon-bell-alt"></i>系统消息</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="JsSignOut"><i class="icon-signout"></i>安全退出</a>
                    </li>
                </ul>
            </div>
        </header>
        <main class="main-cont content mCustomScrollbar">
            <div class="page-wrap">
                <!--开始::内容-->
                <section class="page-hd">
                    <header>
                        <h2 class="title">产品销量排行</h2>
                        <p class="title-description">
                            产品销量排行
                        </p>
                    </header>
                    <hr>
                </section>

                <div class="panel panel-default" style="height: 400px">
                    <div class="panel-bd" style="height: 400px">
                        <div class="panel panel-default" style="height: 400px">
                            <div class="panel-hd">产品销量占比</div>
                            <div class="panel-bd" style="height: 400px">
                                <div id="container" style="height: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>




                <div class="panel panel-default">
                    <div class="panel-bd">
                        <div class="panel-hd">产品销量排行</div>
                        <div class="panel-bd">
                            <table class="table mb-15">
                                <thead>
                                <tr>
                                    <th>产品名称</th>
                                    <th>店铺</th>
                                    <th>排名</th>
                                    <th>销售数量</th>
                                    <th>单价</th>
                                    <th>销售金额</th>
                                </tr>
                                </thead>
                                <tbody id="food_content">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--开始::结束-->
            </div>
        </main>

        <template id="template_food">
            <tr class="cen">
                <td>{{food_name}}</td>
                <td>{{food_shop}}</td>
                <td>{{food_rank}}</td>
                <td>{{food_sellnum}}</td>
                <td>{{food_price}}</td>
                <td>{{food_amount}}</td>
            </tr>
        </template>
    </div>





</div>




<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<script>

    $(function () {
        addFoodRank();
        addFoodRankImg()
    });

    function addFoodRank() {

        let list = [1,2,3];

        let params = {
            food_rank:list,
        };


        //发起ajax http请求获取到商品列表数据
        httpGetWithParams("/food/rank",params,showfoodList);


        function showfoodList(foodList){

            arry = foodList;
            console.log(arry);

            //业务内容清空
            $("#food_content").html("");

            let goodsListHtml = "";
            //获取模板
            let goodsTemplate = $("#template_food").html();

            foodList.forEach(item=>{
                let goodsHtml = goodsTemplate
                .replaceAll("{{food_name}}", item.food_name)
                .replaceAll("{{food_shop}}", item.food_shop)
                .replaceAll("{{food_rank}}", item.food_rank)
                .replaceAll("{{food_sellnum}}", item.food_sellnum)
                .replaceAll("{{food_price}}", item.food_pirce)
                .replaceAll("{{food_amount}}", (item.food_sellnum)*(item.food_pirce));

                //拼接HTML
                goodsListHtml += goodsHtml;
            });


            //填充html到指定位置
            $("#food_content").html(goodsListHtml);
        }
    }



    function addFoodRankImg() {

        let list = [1,2,3];

        let params = {
            food_rank:list,
        };


        //发起ajax http请求获取到商品列表数据
        httpGetWithParams("/food/rank",params,showfoodListImg);


        function showfoodListImg(foodList){

            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            var option;

            option = {
                title: {
                    text: '销量排名',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: (foodList[0].food_sellnum)*(foodList[0].food_pirce), name: foodList[0].food_name},
                            {value: (foodList[1].food_sellnum)*(foodList[1].food_pirce), name: foodList[1].food_name},
                            {value: (foodList[2].food_sellnum)*(foodList[2].food_pirce), name: foodList[2].food_name},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }
    }



</script>

</body>
</html>
